<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT 智能监控系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .sensor-card {
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #ffffff, #f5f7fa);
        }
        .sensor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        .value-display {
            font-family: 'Roboto Mono', monospace;
        }
        .gauge {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 8px solid #e5e7eb;
            border-top-color: #3b82f6;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">IoT 智能监控系统</h1>
                    <p class="text-gray-600 mt-2">
                        设备ID: <span class="font-semibold">a001</span> | 
                        产品ID: <span class="font-semibold">9InW4cu14V</span>
                    </p>
                </div>
                <div class="flex items-center gap-4">
                    <span id="lastUpdate" class="text-sm text-gray-500"></span>
                    <button id="refreshButton" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        刷新数据
                    </button>
                </div>
            </div>
        </header>

        <!-- 环境监测区域 -->
        <section class="mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">环境监测</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 温度卡片 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">温度</h3>
                        <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <div class="flex items-baseline">
                        <span id="tempValue" class="text-3xl font-bold text-gray-900">--</span>
                        <span class="ml-2 text-gray-500">°C</span>
                    </div>
                </div>

                <!-- 湿度卡片 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">湿度</h3>
                        <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </div>
                    <div class="flex items-baseline">
                        <span id="humidityValue" class="text-3xl font-bold text-gray-900">--</span>
                        <span class="ml-2 text-gray-500">%</span>
                    </div>
                </div>

                <!-- CO2卡片 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">CO2浓度</h3>
                        <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <div class="flex items-baseline">
                        <span id="co2Value" class="text-3xl font-bold text-gray-900">--</span>
                        <span class="ml-2 text-gray-500">ppm</span>
                    </div>
                </div>

                <!-- 亮度卡片 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">亮度</h3>
                        <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </div>
                    <div class="flex items-baseline">
                        <span id="brightValue" class="text-3xl font-bold text-gray-900">--</span>
                        <span class="ml-2 text-gray-500">lux</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 设备状态区域 -->
        <section class="mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">设备状态</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 电池状态 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">电池状态</h3>
                        <div class="flex items-center gap-2">
                            <span id="batteryPercentage" class="text-sm font-medium text-gray-500">--</span>
                            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div id="batteryState" class="text-lg font-semibold text-gray-900">--</div>
                </div>

                <!-- 防拆状态 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-700">防拆状态</h3>
                        <div id="tamperIndicator" class="w-3 h-3 rounded-full bg-gray-300"></div>
                    </div>
                    <div id="tamperState" class="text-lg font-semibold text-gray-900">--</div>
                </div>
            </div>
        </section>

        <!-- 控制区域 -->
        <section>
            <h2 class="text-xl font-semibold text-gray-800 mb-4">设备控制</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 温标切换 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">温标切换</h3>
                    <select id="tempUnitSelect" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="0">摄氏度(°C)</option>
                        <option value="1">华氏度(°F)</option>
                    </select>
                </div>

                <!-- 亮度灵敏度调节 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">亮度灵敏度</h3>
                    <input type="range" id="brightSensitivity" class="w-full" min="0" max="100" step="1">
                    <div class="flex justify-between mt-2">
                        <span class="text-sm text-gray-500">低</span>
                        <span id="brightSensitivityValue" class="text-sm font-medium text-gray-700">50</span>
                        <span class="text-sm text-gray-500">高</span>
                    </div>
                </div>

                <!-- 按键控制 -->
                <div class="sensor-card rounded-xl p-6 shadow-sm">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">按键控制</h3>
                    <button id="key1Button" class="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
                        开关
                    </button>
                </div>
            </div>
        </section>
    </div>

    <script>
        const refreshButton = document.getElementById('refreshButton');
        const lastUpdate = document.getElementById('lastUpdate');
        
        // 更新时间显示
        function updateLastUpdateTime() {
            const now = new Date();
            lastUpdate.textContent = `上次更新: ${now.toLocaleTimeString()}`;
        }

        // 更新传感器数据
        function updateSensorValue(elementId, value, defaultValue = '--') {
            const element = document.getElementById(elementId);
            if (element) {
                element.textContent = value !== undefined ? value : defaultValue;
            }
        }

        // 更新设备状态指示器
        function updateStatusIndicator(elementId, value, options) {
            const element = document.getElementById(elementId);
            if (element && options[value] !== undefined) {
                element.textContent = options[value];
            }
        }

        // 更新防拆指示器
        function updateTamperStatus(value) {
            const indicator = document.getElementById('tamperIndicator');
            const state = document.getElementById('tamperState');
            if (indicator && state) {
                const isAlarm = value === true;
                indicator.className = `w-3 h-3 rounded-full ${isAlarm ? 'bg-red-500' : 'bg-green-500'}`;
                state.textContent = isAlarm ? '警报触发' : '正常';
                state.className = `text-lg font-semibold ${isAlarm ? 'text-red-600' : 'text-green-600'}`;
            }
        }

        // 获取设备数据
        async function fetchDeviceData() {
            try {
                const response = await fetch('/api/iot/device-property');
                const data = await response.json();
                
                if (data.code === 0 && data.data) {
                    data.data.forEach(property => {
                        switch(property.identifier) {
                            case 'temp':
                                updateSensorValue('tempValue', property.value);
                                break;
                            case 'HumidityValue':
                                updateSensorValue('humidityValue', property.value);
                                break;
                            case 'Co2Value':
                                updateSensorValue('co2Value', property.value);
                                break;
                            case 'BrightValue':
                                updateSensorValue('brightValue', property.value);
                                break;
                            case 'BatteryPercentage':
                                updateSensorValue('batteryPercentage', `${property.value}%`);
                                break;
                            case 'TamperAlarm':
                                updateTamperStatus(property.value);
                                break;
                        }
                    });
                    updateLastUpdateTime();
                }
            } catch (error) {
                console.error('Error fetching device data:', error);
            }
        }

        // 事件监听器
        refreshButton.addEventListener('click', fetchDeviceData);
        
        // 控制相关的事件监听器
        document.getElementById('tempUnitSelect').addEventListener('change', function(e) {
            // 这里添加温标切换的API调用
            console.log('Temperature unit changed:', e.target.value);
        });

        document.getElementById('brightSensitivity').addEventListener('input', function(e) {
            document.getElementById('brightSensitivityValue').textContent = e.target.value;
            // 这里添加亮度灵敏度调节的API调用
            console.log('Brightness sensitivity changed:', e.target.value);
        });

        document.getElementById('key1Button').addEventListener('click', function() {
            // 这里添加按键控制的API调用
            console.log('Key1 button clicked');
        });

        // 初始化
        fetchDeviceData();
        
        // 自动刷新（每30秒）
        setInterval(fetchDeviceData, 30000);
    </script>
</body>
</html> 